<template>
  <el-card style="width: 100%;">
    <el-table :data="buyData" ref="multipleTableRef">
      <el-table-column type="selection" width="30" />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column prop="goods_name" label="商品名称" align="center" />
      <el-table-column prop="goods_url" label="图片" width="100" align="center">
        <template #default="scope">
          <img :src="require('../assets/images/' + scope.row.goods_url)" alt="" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" align="center">
        <template #default="scope">
          <el-input-number v-model="scope.row.num" :min="1" :max="10" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center" />
      <el-table-column label="总价" align="center">
        <template #default="scope">
          {{ scope.row.price * scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px;">
      总价：<span style="color: red;">￥{{ sum }}</span>
    </div>
    <el-template style="float: right; margin-bottom: 2%;margin-right: 5%;">
      <el-button type="primary" @click="HandleClear()">清空购物车</el-button>
      <el-button type="primary" @click="Settlement()">结算</el-button>
    </el-template>

  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { getshoppingApi } from '@/api/common';
const handleDelete = (index: number, row: any) => {
  ElMessage.success(`删除 ${row.goods_name}`)
  buyData.value.splice(index, 1)
}
const sum = ref(0)
const buyData = ref([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
watchEffect(() => {
  sum.value = multipleTableRef.value?.getSelectionRows().reduce((acc: any, cur: any) => acc + cur.price * cur.num, 0)
});
const HandleClear = () => {
  ElMessageBox.confirm("是否清空购物车？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      buyData.value = []
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消清空！",
      });
    });
}
const getShopping = () => {
  getshoppingApi().then(res => {
    buyData.value = res.data.data
  }).catch(err => {
    ElMessage.error("服务器错误！")
  })
}
onMounted(() => {
  getShopping()
})
const Settlement = () => {
  ElMessageBox.confirm("是否结算？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "结算成功！",
      });
      sum.value = 0;
      multipleTableRef.value?.clearSelection();
    })
    .catch(() => {
      ElMessage.info("取消结算！");
    });
}
</script>